<template>
  <div class="userDialog-container ">
    <el-dialog
      :title="differenttitle? '编辑用户' : '创建用户'"
      :visible="visible"
      @update:visible="$emit('update:visible', $event)"
      width="60%"
      @closed="onclosed"
      v-loading="loading"
    >
      <el-form @validate="onValidate" ref="userform" :rules="userRules" :model="userForm" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item v-if="isShow" label="密码" prop="password">
          <el-input v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="userForm.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select v-model="userForm.permission_group_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="userForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input type="textarea" v-model="userForm.introduction"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button :disabled="disabled" type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { findPermissiontList } from '@/api/permission'
import { postUser, EditUser, GetUserDetails } from '@/api/user'

export default {
  name: 'userDialog',
  props: {
    visible: Boolean,
    differenttitle: Boolean,
    selectId: Number
  },
  data () {
    return {
      userForm: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      },
 
      userRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        role: [
          { required: false }
        ],
        permission_group_id: [
          { required: false }
        ],
        phone: [
          { required: false }
        ],
        introduction: [
          { required: false }
        ]
      },
      options: [],
      loading: false,
      isShow: false,
      disabled: true
    }
  },
  created () {
    this.permissionList()
  },
  methods: {
    onClose () {
      this.$emit('update:visible', false)
    },
    onConfirm () {
      this.$refs.userform.validate(async(valid)=>{
        if(valid) {
          if(!this.differenttitle)
          {
            await postUser(this.userForm)
          } else {
            console.log(11)
          const obj={
            username: this.userForm.username,
            email: this.userForm.email,
            role: this.userForm.role,
            permission_group_id: this.userForm.permission_group_id,
            phone: this.userForm.phone,
            introduction: this.userForm.introduction
          }
            await EditUser(this.selectId, obj)
          }
        }
      })
      
      this.$emit('refresh')
      this.onClose()
    },
    // 任一表单项被校验后触发
    onValidate () {
      if(this.userForm.username.length && this.userForm.email.length && this.userForm.password.length) {
        this.disabled = false
      } else {
        this.disabled = true
      }
      // this.disabled = true
    },
    // 获取下拉框中权限列表
    async permissionList () {
      const res = await findPermissiontList()
      this.options = res
    },
    // 获取用户详情
    async UserDetails () {
      this.loading = true
      const res = await GetUserDetails(this.selectId, this.userForm)
      this.userForm = res
      this.loading = false
    },
    onclosed () {
      this.$refs.userform.resetFields()
    }
  },
  watch: {
    visible (val) {
      this.isShow = true
      if(val && this.differenttitle && this.selectId) {
        this.UserDetails()
        this.isShow = false
      }
    }
  }
}
</script>

<style>

</style>